<template>
  <div style="width: 100%; margin: 10px 0" class="box">
    <el-container
      ref="listWarp"
      style="height: 100%; background-color: #fff; margin: 0 10px"
    >
      <el-main style="padding: 0px; height: 100%">
        <el-table
          ref="dataListTable"
          :data="dataList"
          tooltip-effect="light"
          empty-text
          border
          stripe
          highlight-current-row
          class="table-edit"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            width="50"
            label="序号"
          ></el-table-column>
          <el-table-column width="50" align="center" style="padding: 0">
            <template slot="header" slot-scope="scope">
              <el-button
                type="primary"
                style="padding: 5px"
                size="mini"
                @click="fnAddRow(scope.row, scope.$index)"
              >
                <i
                  style="font-size: 16px"
                  class="el-icon-circle-plus-outline"
                ></i>
              </el-button>
            </template>
            <template slot-scope="scope">
              <div
                class="cell-delete-btn"
                @click="fnDeleteRow(scope.row, scope.$index)"
              >
                <svg-icon slot="prefix" icon-class="delete" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="使用人" width="300">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.useName"
                :maxlength="50"
                style="width: 100%"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="specs"
            label="联系电话"
            show-overflow-tooltip
            header-align="center"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.phone"
                oninput="value=value.replace(/[^\d.]/g,'')"
                :maxlength="50"
                style="width: 100%"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="company"
            label="职务"
            show-overflow-tooltip
            header-align="center"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              <!-- <el-input v-model="scope.row.titleName" :maxlength="50" style="width: 100%;" /> -->
              <el-select
                v-model="scope.row.titleId"
                placeholder="请选择职务"
                filterable
                clearable
                size="small"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in titleList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="price"
            label="备注"
            show-overflow-tooltip
            header-align="center"
            width="180"
            align="center"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.remark"
                :maxlength="50"
                style="width: 100%"
              />
            </template>
          </el-table-column>
          <div slot="empty">
            <svg-icon
              slot="prefix"
              icon-class="zanwushuju"
              style="font-size: 40px; color: #ccc"
            />
            <p style="font-size: 13px; margin-top: 10px">暂无数据</p>
          </div>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { transactionApi } from "@/api/home/transaction";

export default {
  components: {},
  props: {
    dataList: {
      //朴素
      type: [Object, Array],
      default: () => {},
    },
  },
  data() {
    return { titleList: [] };
  },
  methods: {
    funLoadTitleList() {
      transactionApi.getDataListByType(1).then((res) => {
        if (res.errorCode === 0) {
          this.titleList = res.data;
        }
      });
    },
    fnAddRow() {
      let obj = {
        useName: "",
        phone: "",
        titleName: "",
        remark: "",
      };
      this.dataList.push(obj);
    },
    fnDeleteRow(row, index) {
      this.$confirm(
        "确定要删除当前行【" + (row.useName ? row.useName : "") + "】吗？",
        "删除行",
        {
          distinguishCancelAndClose: true,
          showClose: false,
          confirmButtonText: "删除",
          cancelButtonText: "放弃删除",
          type: "warning",
        }
      )
        .then(() => {
          this.dataList.splice(index, 1);
        })
        .catch(() => {});
    },
  },
  watch: {
    // 'dataList[activeIndex]': {
    //   handler: function (val) {
    //     // this.dataList.forEach((el) => {
    //     // });
    //     val.type = "1";
    //   },
    //   deep: true,
    // },
  },
  mounted() {
    this.funLoadTitleList();
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.item {
  float: left;
  width: auto;
  height: 33px;
  border: 1px solid #ececf0;
  background-color: #fafafa;
  line-height: 33px;
  padding: 0 20px;
  border-radius: 5px;
  margin: 14px 25px;
  cursor: pointer;
  position: relative;

  .tag {
    position: relative;
    top: -18px;
    left: 50px;
    display: inline-block;
    width: 25px;
    height: 25px;
    background-color: #12b893;
    border-radius: 50%;
    line-height: 25px;
    text-align: center;
    color: #fff;
  }
  .remove {
    position: relative;
    left: 48px;
    display: inline-block;
    width: 25px;
    height: 25px;
    background-color: #f4f4f4;
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    color: #00b38b;
  }
}
.on {
  border: 1px solid #00b38b !important;
}
.cell-delete-btn {
  cursor: pointer;
  font-size: 14px;

  &:hover {
    color: #e54545;
    font-weight: bold;
    font-size: 16px;
  }
}
.box {
  /deep/ .el-radio-button--small .el-radio-button__inner {
    margin: 0 25px;
    border: 1px solid #dcdfe6;
    border-radius: 5px !important;
  }
}
</style>
